<template>
  <div v-loading="loading">
    <!-- 图片 -->
    <el-image v-show="['jpg', 'png', 'bmp', 'gif'].includes(props.type as string)" :src="src" :preview-src-list="[src]"
      style="height: 300px;width: 100%;" fit="fill" />
    <!-- docx -->
    <vue-office-docx v-show="props.type === 'docx'" :src="src" style="height: 100vh" @rendered="renderedHandler"
      @error="errorHandler" />
    <!-- xlsx -->
    <vue-office-excel v-show="props.type === 'xlsx'" :src="src" style="height: 100vh" @rendered="renderedHandler"
      @error="errorHandler" />
    <!-- pdf -->
    <vue-office-pdf v-show="props.type === 'pdf'" :src="src" style="height: 100vh" @rendered="renderedHandler"
      @error="errorHandler" />
    <!-- 视频 -->
    <video controls v-show="props.type === 'mp4'" style="height: 300px;width: 100%;" :src="src"></video>
    <!-- 图文 -->
    <div v-show="props.type === 'html'" class="wang-edit-container" style="height: 100vh;width: 100%;" v-html="src">
    </div>
  </div>
</template>

<script lang="ts" setup>
// 文件预览组件,支持多种图片格式(.jpg,.png,.bmp,.gif),docx,pdf,xlsx,mp4
import { onMounted, ref } from 'vue';
import VueOfficeDocx from '@vue-office/docx/lib/v3/vue-office-docx.mjs';
import VueOfficeExcel from '@vue-office/excel/lib/v3/vue-office-excel.mjs';
import VueOfficePdf from '@vue-office/pdf/lib/v3/vue-office-pdf.mjs';
import '@vue-office/docx/lib/v3/index.css';
import '@vue-office/excel/lib/v3/index.css';

defineOptions({
  name: 'MkPreView'
})

// prop
const props = defineProps({
  src: {
    type: String,
    require: true
  },
  // 可选值：.jpg,.png,.bmp,.gif,docx,xlsx,pdf,mp4
  type: {
    type: String,
    require: true
  }
});

const loading = ref(false)

onMounted(() => {
  if (['docx', 'xlsx', 'pdf'].includes(props.type as string)) {
    loading.value = true
  }
})

// 文件渲染完成
const renderedHandler = () => {
  loading.value = false
};

// 文件渲染失败
const errorHandler = (e: any) => {
  loading.value = false
};

</script>

<style lang="scss" scoped>
// wang-edit富文本组件的产生的表格html没有样式，以下简单开发table的样式,在需要v-html的容器中加.wang-edit-container类名
:deep(.wang-edit-container) {
  table {
    border-spacing: 0;
  }

  th {
    background-color: #f5f2f0;
    font-weight: 700;
    text-align: center;
    border: 1px solid #ccc;
  }

  td {
    border: 1px solid #ccc;
    line-height: 1.5;
    min-width: 30px;
    padding: 3px 5px;
    text-align: left;
  }
}
</style>